<template>
  <div>
    <!-- 添加 -->
    <Search
      :btnLoading="categoryLoading"
      @click="getCategories"
      >添加分类</Search>
    <!-- 表格 -->
    <MyTable
    :tp="{ hasChildren: 'hasChildren', children: 'children' }" 
    rowKey="cat_id" 
     v-model="queryModel"
     :loading="queryLoading" 
     :cols="cols"
     :total="total"
     :data="list" 
     @change="getcategoryList"
     >
     <template v-slot:scicon="{row:{cat_deleted}}">
          <i
          :style="{color:cat_deleted?'red':'green'}"
          :class="cat_deleted?'el-icom-error':'el-icon-success'"
          >

          </i>
     </template>
     <template v-slot:level="{row:{cat_level}}">
          <el-tag :type="colors[cat_level]">
              {{levels[cat_level]}}级
          </el-tag>
      </template>
      <template v-slot:action="{row}">
          <el-button 
          size="mini" 
          type="primary" 
          icon="el-icon-edit"
           @click="
           model={...row};
           $refs.d.show();
           "
           >编辑</el-button>
          <el-button 
          size="mini" 
          type="danger" 
          icon="el-icon-delete"
          @click="delCategory(row)"
          >删除</el-button>
      </template>
     </MyTable>
     <!-- 添加修改 -->
     <DF 
     v-model="model"
     :title="title+'分类'"
     :opts="opts"
     @confirm="confirm"
     ref="d"
     lw="80px"
     >

     </DF>
  </div>
</template>

<script>
import {deleteCategory,categoryList,updateCategory,addCategory} from 'api/goods';
import { pageMixins } from '@/mixins/baseMixins';
export default {
    mixins:[pageMixins],
  name: "categories",
  data() {
    return {
      /**
       * 分类列表
       */
      categories:[],
      /**
       * 获取分类loading
       */
        categoryLoading:false,
        /**
         * 添加修改模型
         */
        model:{},
         /**
         * 等级
         */
        levels:["一","二","三"],
        /**
         * 颜色
         */
        colors:["","success","warning"],
        /**
         * 列
         */
        cols: [
            {
                title:"#",
                type:"index"
            },
            {
                title:"分类名称",
                name:"cat_name",
            },
            {
                title:"是否有效",
                slot:"scicon",
            },
            {
                title:"排序",
                slot:"level",
            },
            {
                title:"操作",
                slot:"action",
                width:"270",
                align:"center",
            }
        ],
        /**
         * 查询模型
         */
        queryModel:{
          ...this.queryModel,
          type:3,
        }
    }
  },
  created () {
    this.getcategoryList();
  },
   methods: {
    async delCategory({cat_name,cat_id}){
      let res;
      try {
        res=await this.$myConfirm(`你确定要删除【${cat_name}】吗？`);
        await deleteCategory(cat_id);
        this.getcategoryList();
        this.$m.success("删除成功");
      } catch (error) {}
      res&&res()
    },
    /**
     * 获取分类列表
     */
    async getCategories(){
      try {
        this.categoryLoading=true;
        this.categories=await categoryList({type:2});
        this.model={};
        this.$refs.d.show();
      } catch (error) {
        console.log(error);
      }
      this.categoryLoading=false;
    },
    /**
     * 提交
     */
    async confirm(){
       const d=this.$refs.d;
       try {
        d.start();
         await (this.model.cat_id?updateCategory:addCategory)({
          ...this.model,
          ...(this.model.cat_id?{}:{
            cat_pid:this.model.cat_pid?.slice(-1)[0]??0,
            cat_level:this.model.cat_pid?.length??0,
          }),
         });
         d.hide();
         this.$m.success(this.title+'成功');
         this.getcategoryList();
         d.hide();
       } catch (error) {
        console.log(error);
       }
       d.stop();
    },
    /**
     * 列表渲染
     */
    async getcategoryList() {
        try {
            this.queryLoading=true;
            const {total,result}=await categoryList(this.queryModel);
            this.list=result;
            this.total=total;
        } catch (error) {}
             this.queryLoading=false;
    }
   },
   computed: {
    /**
     * 标题
     */
    title() {
        return this.model.cat_id?'修改':"添加"
    },
    /**
     * 表单配置项
     */
     opts(){
        return{
            cat_name:{
            title:"分类名称",
            required:true,
            max:20,
          },
         ...(this.model.cat_id?{}:{
            cat_pid:{
              title:"父级分类",
              tag:"cas",
              style:{width:'100%'},
              options:this.categories,
              props:{value:'cat_id',label:'cat_name'},
            }
         })
        }    
    },
   },
};
</script>

<style lang="scss" scoped>

</style>